<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-for为什么需要一个key值 以及v-for循环对象 -->
    <div id="app">
        <ul>
            <!-- v-for的key值一定要v-bind动态绑定 -->
            <!-- 如果不-v-bind动态绑定 它绑定的是item这个值，而不是变量，就会导致每个li的key都是 'item'字符串 -->
            <!-- v-bind动态绑定key，它的每一个li都会将key里面的值当成一个变量去解析 -->
            <li v-for="(item, index) in books" :key="item.id">
                {{ item.name }}-{{ index }}
            </li>
        </ul>
        <button @click="addBook">添加书籍</button>
        <ul>
            <!-- v-for 循环对象，（value:值， key:键，index:索引）顺序不能 -->
            <!-- 第一个是值，第二个是键，第三个是索引值 -->
            <!-- <li v-for="(value, key, index) in info">
                {{ value }}-{{ index }}
            </li> -->
        </ul>
        <!-- 在第二个li后面插入王发发发财日记 -->
        <li> li-1 三国演义</li>
        <li> li-2 红楼梦</li>
        <li> li-5 王发发发财日记</li>
        <li> li-3 水浒传</li>
        <li> li-4 西游记</li>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    books:[
                        {
                            id:1,
                            name:'三国演义'
                        },
                        {
                            id:2,
                            name:'红楼梦'
                        },
                        {
                            id:3,
                            name:'水浒传'
                        },
                        {
                            id:4,
                            name:'西游记'
                        },
                    ],
                    info:{
                        name:'王某人',
                        age:18,
                        height:165,
                    }
                }
            },
            methods:{
                addBook(){
                    this.books.splice(1,0,'王发发发财日记')
                }
            }
        })
    </script>
</body>
</html>